﻿<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
	xmlns:views="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Views.Toolkit" 
	xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="Microsoft.Bing.Application.Page"
    Width="Auto" Height="Auto" d:DesignWidth="640" d:DesignHeight="480">
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="48"/>
			<RowDefinition Height="*"/>
		</Grid.RowDefinitions>

		<!--Background Fill for entire Control-->
		<Rectangle x:Name="BaseFill" Grid.RowSpan="3">
			<Rectangle.Fill>
				<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
					<GradientStop Color="#FF448DCA" Offset="0"/>
					<GradientStop Color="#FFFFFFFF" Offset="1"/>
				</LinearGradientBrush>
			</Rectangle.Fill>
		</Rectangle>

		<!--Row with Search Query Controls in it-->
		<Grid x:Name="QueryBar" Grid.Row="0" Margin="8,8,8,0">
			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="128"/>
				<ColumnDefinition Width="*"/>
				<ColumnDefinition Width="128"/>
			</Grid.ColumnDefinitions>

			<!--Search Box-->
			<Border CornerRadius="4" Grid.Column="1" VerticalAlignment="Center" BorderBrush="#44FFFFFF" BorderThickness="1">
				<Border.Background>
					<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
						<GradientStop Color="#44FFFFFF" Offset="0"/>
						<GradientStop Color="#00FFFFFF" Offset="1"/>
					</LinearGradientBrush>
				</Border.Background>
				<Grid Margin="4">
					<Grid.ColumnDefinitions>
						<ColumnDefinition Width="*"/>
						<ColumnDefinition Width="28"/>
						<ColumnDefinition Width="64"/>
					</Grid.ColumnDefinitions>
					<Rectangle Fill="White" Stroke="#FFACD9FF" StrokeThickness="1" Grid.ColumnSpan="2"/>
					<TextBox x:Name="QueryText" BorderBrush="Transparent" Background="White" Grid.Column="0" Width="Auto" Height="24" Margin="2,0,0,0" VerticalAlignment="Center"/>
					<Button x:Name="SearchButton" Click="OnExecuteSearch" Grid.Column="1" Width="24" Height="24" Margin="2" VerticalAlignment="Center" BorderBrush="Transparent">
						<Button.Background>
							<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
								<GradientStop Color="#FFFDBB50" Offset="0"/>
								<GradientStop Color="#FFFF860A" Offset="1"/>
							</LinearGradientBrush>
						</Button.Background>
						<Button.Template>
							<ControlTemplate TargetType="Button">
								<Grid>
									<Grid.RenderTransform>
										<TranslateTransform x:Name="BaseTranslate" X="0" Y="0"/>
									</Grid.RenderTransform>
									<VisualStateManager.VisualStateGroups>
										<VisualStateGroup x:Name="CommonStates">
											<VisualState x:Name="Normal"/>
											<VisualState x:Name="MouseOver">
												<Storyboard>
													<DoubleAnimation Duration="0:0:0.25" Storyboard.TargetName="LightFill" Storyboard.TargetProperty="Opacity" To="1"/>
												</Storyboard>
											</VisualState>
											<VisualState x:Name="Pressed">
												<Storyboard>
													<DoubleAnimation Duration="0" Storyboard.TargetName="LightFill" Storyboard.TargetProperty="Opacity" To="1"/>
													<DoubleAnimation Duration="0" Storyboard.TargetName="BaseTranslate" Storyboard.TargetProperty="X" To="1"/>
													<DoubleAnimation Duration="0" Storyboard.TargetName="BaseTranslate" Storyboard.TargetProperty="Y" To="1"/>
												</Storyboard>
											</VisualState>
											<VisualState x:Name="Disabled">
												<Storyboard>
													<DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To=".55"/>
												</Storyboard>
											</VisualState>
										</VisualStateGroup>
										<VisualStateGroup x:Name="FocusStates">
											<VisualState x:Name="Focused">
												<Storyboard>
													<DoubleAnimation Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="1"/>
												</Storyboard>
											</VisualState>
											<VisualState x:Name="Unfocused" />
										</VisualStateGroup>
									</VisualStateManager.VisualStateGroups>
									<Border x:Name="Background" CornerRadius="4" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
										<Grid Margin="1">
											<Rectangle x:Name="LightFill" Opacity="0.5">
												<Rectangle.Fill>
													<LinearGradientBrush StartPoint=".5,0" EndPoint=".5,1">
														<GradientStop Color="#88FFFFFF" Offset="0" />
														<GradientStop Color="#22FFFFFF" Offset="0.5" />
														<GradientStop Color="#00FFFFFF" Offset="0.51" />
														<GradientStop Color="#00FFFFFF" Offset="1" />
													</LinearGradientBrush>
												</Rectangle.Fill>
											</Rectangle>
										</Grid>
									</Border>
									<ContentPresenter
											x:Name="contentPresenter"
											Content="{TemplateBinding Content}"
											ContentTemplate="{TemplateBinding ContentTemplate}"
											VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
											HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
											Margin="{TemplateBinding Padding}"/>
									<Rectangle x:Name="DisabledVisualElement" RadiusX="4" RadiusY="4" Fill="#FFFFFFFF" Opacity="0" IsHitTestVisible="false" />
									<Rectangle x:Name="FocusVisualElement" RadiusX="2" RadiusY="2" Margin="1" Stroke="#FFFF860A" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
								</Grid>
							</ControlTemplate>
						</Button.Template>
						<Path x:Name="LensPath" Width="15.4273" Height="15.577" Canvas.Left="1.19209e-007" Canvas.Top="0" Stretch="Fill" StrokeThickness="2" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" Stroke="#FFFFFFFF" Data="M 9.13616,1C 12.0584,1 14.4273,3.36892 14.4273,6.29113C 14.4273,9.21333 12.0584,11.5823 9.13616,11.5823C 6.21395,11.5823 3.84503,9.21333 3.84503,6.29113C 3.84503,3.36892 6.21395,1 9.13616,1 Z M 5.45234,10.1247L 1,14.577"/>
					</Button>
					<Image x:Name="BarLogo" Source="BingLogo51x19White.png" Stretch="None" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center" Width="51" Height="24" Cursor="Hand"/>
				</Grid>
			</Border>
		</Grid>

		<!--Core View Row-->
		<Grid x:Name="ViewGrid" Grid.Row="1" Margin="8">
			<Grid.RowDefinitions>
				<RowDefinition Height="36"/>
				<RowDefinition Height="*"/>
				<RowDefinition Height="48"/>
			</Grid.RowDefinitions>

			<!--Toolbar and View Label-->
			<views:Toolbar x:Name="ViewToolbar" Grid.Row="0" Width="Auto" BorderBrush="Transparent" BorderThickness="0">
				<views:ToolbarButton x:Name="SearchWeb" GroupName="SourceType" Width="32" Height="32" IsPressed="True"/>
				<views:ToolbarButton x:Name="SearchImages" GroupName="SourceType" Width="32" Height="32"/>
				<views:ToolbarButton x:Name="SearchVideo" GroupName="SourceType" Width="32" Height="32"/>
				<views:ToolbarButton x:Name="SearchNews" GroupName="SourceType" Width="32" Height="32"/>
				<views:ToolbarSeperator/>
				<views:ToolbarButton x:Name="ViewStack" GroupName="ViewAs" Width="32" Height="32" IsPressed="True"/>
				<views:ToolbarButton x:Name="ViewTile" GroupName="ViewAs" Width="32" Height="32"/>
				<views:ToolbarButton x:Name="ViewCloud" GroupName="ViewAs" Width="32" Height="32"/>
				<views:ToolbarButton x:Name="ViewBand" GroupName="ViewAs" Width="32" Height="32"/>
			</views:Toolbar>
			<TextBlock x:Name="ViewCaption" FontFamily="Arial" FontWeight="Bold" FontSize="12" Foreground="White" Text="Search Results" IsHitTestVisible="False" VerticalAlignment="Center" Margin="4"/>

			<!--Page Size-->
			<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Right">
				<TextBlock x:Name="PageSizeLabel" Text="Items Per Page" TextAlignment="Right" Margin="8,4,4,4" VerticalAlignment="Center" Foreground="White" FontFamily="Arial" FontSize="12" FontWeight="Bold"/>
				<Slider x:Name="PageSize" Maximum="50" Minimum="10" Value="20" Width="128" SmallChange="10" LargeChange="10"/>
				<TextBlock x:Name="PageSizeValueLabel" Text="20" TextAlignment="Right" Margin="4,4,8,4" VerticalAlignment="Center" Foreground="White" FontFamily="Arial" FontSize="12" FontWeight="Bold"/>
			</StackPanel>

			<!--Multiview with Views Toolkit views for displaying Live Search Results-->
			<Rectangle Grid.Row="1" Width="Auto" Stroke="#FF888888" RadiusX="0" RadiusY="0">
				<Rectangle.Fill>
					<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
						<GradientStop Color="#FFACD9FF" Offset="0"/>
						<GradientStop Color="#FFFFFFFF" Offset="1"/>
					</LinearGradientBrush>
				</Rectangle.Fill>
			</Rectangle>

			<Grid Grid.Row="1">
				<Grid.ColumnDefinitions>
					<ColumnDefinition Width="200"/>
					<ColumnDefinition Width="*"/>
				</Grid.ColumnDefinitions>

				<views:MultiView x:Name="ViewHost" Grid.Column="1" Width="Auto" Height="Auto">
					<views:MultiViewPanel x:Name="StackPanel" Margin="4">
						<views:StackView x:Name="StackView" Width="Auto" Height="Auto">
							<views:StackView.ItemTemplate>
								<DataTemplate>
									<Grid Margin="4">
										<Grid.ColumnDefinitions>
											<ColumnDefinition Width="48"/>
											<ColumnDefinition Width="*"/>
										</Grid.ColumnDefinitions>
										<Grid.RowDefinitions>
											<RowDefinition Height="*"/>
											<RowDefinition Height="*"/>
										</Grid.RowDefinitions>
										<Image x:Name="Icon" Source="{Binding IconUrl}" Grid.Column="0" Grid.RowSpan="2" Width="48" Height="48" Stretch="Uniform"/>
										<Grid Grid.Row="0" Grid.Column="1" Width="Auto">
											<views:LinkLabel Text="{Binding Title}" NavigateUri="{Binding Url}" FontWeight="Bold" FontSize="12" Margin="4,2,2,2"/>
										</Grid>
										<TextBlock Text="{Binding Snippet}" Grid.Column="1" Grid.Row="1" Margin="4,2,2,2"/>
									</Grid>
								</DataTemplate>
							</views:StackView.ItemTemplate>
						</views:StackView>
					</views:MultiViewPanel>
					<views:MultiViewPanel x:Name="TilePanel" Margin="4">
						<views:TileView x:Name="TileView" Width="Auto" Height="Auto" TileWidth="200" TileHeight="200" TileSpacing="8">
							<views:TileView.ItemTemplate>
								<DataTemplate>
									<Grid Margin="2">
										<Grid.RowDefinitions>
											<RowDefinition Height="128"/>
											<RowDefinition Height="*"/>
										</Grid.RowDefinitions>
										<Image x:Name="Icon" Grid.Row="0" Width="Auto" Height="128" Source="{Binding LargeIconUrl}" Stretch="Uniform"/>
										<views:LinkLabel Text="{Binding Title}" NavigateUri="{Binding Url}" Grid.Row="1" FontWeight="Normal" FontSize="11" Margin="2" TextAlignment="Center" TextWrapping="Wrap" Width="Auto"/>
									</Grid>
								</DataTemplate>
							</views:TileView.ItemTemplate>
						</views:TileView>
					</views:MultiViewPanel>
					<views:MultiViewPanel x:Name="CloudPanel" Margin="4">
						<views:CloudView x:Name="CloudView" Width="Auto" Height="Auto">
							<views:CloudView.ItemTemplate>
								<DataTemplate>
									<Grid Margin="1">
										<Grid.RowDefinitions>
											<RowDefinition Height="48"/>
											<RowDefinition Height="*"/>
										</Grid.RowDefinitions>
										<Image x:Name="Icon" Source="{Binding IconUrl}" Grid.Row="0" Width="48" Height="48" Margin="0,0,0,1" Stretch="Uniform"/>
										<views:LinkLabel Text="{Binding Title}" NavigateUri="{Binding Url}" Grid.Row="1" FontWeight="Normal" FontSize="9" Margin="0" TextAlignment="Center" TextWrapping="Wrap"/>
									</Grid>
								</DataTemplate>
							</views:CloudView.ItemTemplate>
						</views:CloudView>
					</views:MultiViewPanel>
					<views:MultiViewPanel x:Name="BandPanel" Margin="4">
						<views:BandCloudView x:Name="BandView" Width="Auto" Height="Auto" HorizontalSortField="Date" HorizontalSortDirection="Descending" VerticalSortField="Relevancy" VerticalSortDirection="Descending">
							<views:BandCloudView.ItemTemplate>
								<DataTemplate>
									<Grid Margin="2">
										<Grid.RowDefinitions>
											<RowDefinition Height="48"/>
											<RowDefinition Height="*"/>
										</Grid.RowDefinitions>
										<Image x:Name="Icon" Source="{Binding IconUrl}" Grid.Row="0" Width="48" Height="48" Margin="0" Stretch="Uniform"/>
										<views:LinkLabel Text="{Binding Title}" NavigateUri="{Binding Url}" Grid.Row="1" FontWeight="Normal" FontSize="9" Margin="0" TextAlignment="Center" TextWrapping="Wrap"/>
									</Grid>
								</DataTemplate>
							</views:BandCloudView.ItemTemplate>
						</views:BandCloudView>
					</views:MultiViewPanel>
				</views:MultiView>

				<!--Search History Bar-->
				<Grid Grid.Column="0" MaxWidth="200" Width="200" HorizontalAlignment="Left">
					<Border CornerRadius="0">
						<Border.Background>
							<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
								<GradientStop Color="#FF222222" Offset="0"/>
								<GradientStop Color="#FF448DCA" Offset="0.5"/>
								<GradientStop Color="#FF444444" Offset="1"/>
							</LinearGradientBrush>
						</Border.Background>
						<Grid>
							<Grid.RowDefinitions>
								<RowDefinition Height="36"/>
								<RowDefinition Height="*"/>
								<RowDefinition Height="32"/>
							</Grid.RowDefinitions>
							<TextBlock x:Name="SearchHistoryTitle" FontWeight="Bold" Grid.Row="0" Text="Search History" Margin="4" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
							<ListBox x:Name="HistoryList" Grid.Row="1" Margin="4" Background="Transparent" BorderBrush="Transparent">
								<ListBox.ItemTemplate>
									<DataTemplate>
										<HyperlinkButton Content="{Binding Query}" Foreground="#FFFFAA00" Click="OnHistoryLinkClick"/>
									</DataTemplate>
								</ListBox.ItemTemplate>
							</ListBox>
							<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Grid.Row="2">
								<Button x:Name="ClearHistoryButton" Margin="4">
									<TextBlock x:Name="ClearHistoryButtonText" Text="Clear"/>
								</Button>
							</StackPanel>
						</Grid>
					</Border>
				</Grid>
			</Grid>

			<!--Pager and Result Row-->
			<Grid x:Name="PagerGrid" Grid.Row="2">
				<Grid.ColumnDefinitions>
					<ColumnDefinition Width="*"/>
					<ColumnDefinition Width="300"/>
					<ColumnDefinition Width="*"/>
				</Grid.ColumnDefinitions>

				<!--Pager-->
				<Border CornerRadius="0,0,8,8" Grid.ColumnSpan="3">
					<Border.Background>
						<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
							<GradientStop Color="#FF444444" Offset="0"/>
							<GradientStop Color="#FF222222" Offset="0.5"/>
							<GradientStop Color="#FF000000" Offset="0.51"/>
							<GradientStop Color="#FF222222" Offset="1"/>
						</LinearGradientBrush>
					</Border.Background>
				</Border>
				<views:Toolbar x:Name="Pager" Width="Auto" HorizontalAlignment="Center" Background="Transparent" BorderBrush="Transparent" Grid.Column="1" Visibility="Collapsed" CornerRadius="4,4,0,0">
					<views:ToolbarButton x:Name="PageFirst" Value="First"/>
					<views:ToolbarButton x:Name="PageBack" Value="Back"/>
					<views:ToolbarButton x:Name="Page1" GroupName="Page"/>
					<views:ToolbarButton x:Name="Page2" GroupName="Page"/>
					<views:ToolbarButton x:Name="Page3" GroupName="Page"/>
					<views:ToolbarButton x:Name="Page4" GroupName="Page"/>
					<views:ToolbarButton x:Name="Page5" GroupName="Page"/>
					<views:ToolbarButton x:Name="PageNext" Value="Next"/>
				</views:Toolbar>

				<!--No Results-->
				<TextBlock x:Name="NoResultsLabel" FontFamily="Arial" FontSize="12" FontWeight="Bold" Foreground="White" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center" Text="No Results" Visibility="Visible"/>

				<!--Result Count Label-->
				<TextBlock x:Name="ResultCountLabel" FontFamily="Arial" FontSize="12" FontWeight="Bold" Foreground="White" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Right" TextAlignment="Right" Text="0 Results" Visibility="Collapsed"/>

				<!--Page Count-->
				<TextBlock x:Name="PageCountLabel" FontFamily="Arial" FontSize="12" FontWeight="Bold" Foreground="White" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Left" TextAlignment="Left" Text="Page 1 of 1" Visibility="Collapsed"/>

				<!--Live Logo-->
				<Canvas x:Name="LogoContainer" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Right" Width="96" Height="32" Margin="0,0,2,0">
					<Image x:Name="LiveLogo" Source="BingLogo51x19White.png" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center" Width="96" Height="32" Cursor="Hand"/>
				</Canvas>
			</Grid>
		</Grid>
    </Grid>
</UserControl>
